<template>
	<div class="h-[200px] bg-bg-1 rounded-md">
		<betting-analysis-legend :data="legendData" :type="type" />
		<betting-analysis-item :title="$t('bettingAnalysis.timeTitle', [title])" :data="timeData" />
		<betting-analysis-item
			:title="$t('bettingAnalysis.amountTitle', [title])"
			:data="stakeData"
			currency />
	</div>
</template>

<script lang="ts" setup>
import { computed, PropType } from 'vue'
import BettingAnalysisLegend from './betting-analysis-legend.vue'
import BettingAnalysisItem from './betting-analysis-item.vue'
import { BettingType, SportsType } from '@/enums'
import { t } from '@/utils'
import { Match } from '@/types'

const props = defineProps({
	data: {
		type: Array<any>,
		default: () => []
	},
	eventData: {
		type: Object as PropType<Match>
	},
	title: {
		type: String
	},
	type: {
		type: String as PropType<BettingType>,
		required: true
	}
})

const legendData = computed(() => {
	let left = ''
	let right = ''
	let center = ''
	if (props.eventData) {
		const { homeTeamName, awayTeamName } = props.eventData
		if (props.type === BettingType.handicap) {
			left = homeTeamName
			right = awayTeamName
		} else if (props.type === BettingType.ou) {
			left = t('betting.over')
			right = t('betting.under')
		} else if (props.type === BettingType.moneyline) {
			left = homeTeamName
			right = awayTeamName
			center = t('betting.draw')
		}
	}
	return { left, right, center }
})

const timeData = computed(() =>
	props.data
		?.filter(
			({ teamId }) =>
				!(
					teamId === 'X' &&
					props.eventData?.sportId !== SportsType.football &&
					props.eventData?.sportId !== SportsType.fifa24
				)
		)
		.map(({ times, type }) => ({ value: times, type }))
)

const stakeData = computed(() =>
	props.data
		?.filter(
			({ teamId }) =>
				!(
					teamId === 'X' &&
					props.eventData?.sportId !== SportsType.football &&
					props.eventData?.sportId !== SportsType.fifa24
				)
		)
		.map(({ stakes, type }) => ({ value: stakes, type }))
)
</script>
